<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右浮动元素居中</title>
    <style>
        p{
            margin: 0px;
            padding: 0px;
        }

        .box{
            width: 500px;
            height: 100px;
            display: table-cell;
            vertical-align: middle;
            background-color: #8235bd;
            text-align: center;
        }

        .box-in{
            clear: both;
            height: 72px;
            display: inline-block;
            width:400px;
        }

        .box-float{
            height: 70px;
            line-height: 70px;
            width: 180px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            border: 1px solid #fff;
        }

        .box-left{
            float: left;
        }

        .box-right{
            float: right;
        }

    </style>
</head>
<body>
    <!--既然display:table-cell;的垂直居中不能直接对浮动元素起作用，
    那就来个间接的嘛。
    给两个浮动的元素外面一个display:inline-block;的元素，
    并且清除浮动。然后让display:table-cell的垂直居中对inline-block元素起作用就好了-->
    <div class="box">
        <div class="box-in">
            <!-- <div class="box-left box-float">
                我是左边浮动元素
            </div>
            <div class="box-right box-float">
                我是右边浮动元素
            </div> -->
            <div class="box-left box-float">
                我是左边浮动元素
            </div>
            <div class="box-right box-float">
                我是右边浮动元素
            </div>
        </div>
    </div>
    <div>这是一个间隔</div> 
    <div class="box">
        <div class="box-in">
            <div class="box-left box-float">
                我是左边浮动元素
            </div>
            <div class="box-right box-float">
                我是右边浮动元素
            </div>
        </div>
    </div>
    <div></div>
    <div class="box">
        <div class="box-in">
            <div class="box-left box-float">
                我是左边浮动元素
            </div>
            <div class="box-right box-float">
                我是右边浮动元素
            </div>
        </div>
    </div>
</body>
</html>